<template>
    <div class="storeInfo">
        <div class="head">    
            <el-form :model="form" class="headForm">
                <el-form-item label="">
                    <el-input v-model="form.keyword" placeholder="会员名称/手机号/卡号后四位"></el-input>
                </el-form-item>

                <el-form-item label="">
                    <el-input v-model="form.birthday" placeholder="生日"></el-input>
                </el-form-item>

                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </el-form>      
        </div>
         
        <!-- tab部分 -->
        <div class="tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center">
                <!-- VIP会员	性别	卡号	手机	余额	消费总额	生日	最近消费日期	操作 -->
                <el-table-column prop="order_id" label="VIP会员" fixed width="260">
                    <template slot-scope="scope">
                        <el-image style="width: 30px; height: 30px;border-radius:50%;margin-right:5px;vertical-align:middle;background:#000" :src="scope.row.thumb" fit="fill"></el-image>
                        <span>{{scope.row.nickname}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="sex_cn" label="性别"> </el-table-column>
                <el-table-column v-if="isSC" prop="card_number" label="卡号"></el-table-column>
                <el-table-column prop="mobile" label="手机号"></el-table-column>
                <el-table-column prop="balance_price" label="余额"></el-table-column>                
                <el-table-column prop="consum_price" label="消费总额"> </el-table-column>
                <el-table-column prop="birthday" label="生日"></el-table-column>
                <el-table-column prop="last_consum_time" label="最近消费日期"></el-table-column>
                <el-table-column  label="操作" prop="price_id" v-if="limitList.length>0">
                    <template  slot-scope="scope">            
                        <span v-for="(item,indexLimit) in limitList" :key="indexLimit" class="lightFont" @click="theClick(item.url,scope.row)">
                            <i>{{item.name}}</i><i v-if="indexLimit != limitList.length-1">&nbsp;|&nbsp;</i>
                        </span>
                    </template>

                </el-table-column>
                <el-table-column label="操作"  v-else>/</el-table-column>

            </el-table>
                        
        </div>
        <!-- 分页部分 -->
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>

    </div>
</template>
<style lang="scss">
.el-table .cell{text-align: left}
</style>

<script>
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js'; 
export default {
    data(){
        return {          
            tableData:[],
            total:50,
            size:20,
            pageNum:1,
            form:{
                size:20,
                page:'1'

            },
            limitList:[
                {url:"consume",name:'消费记录'},
                {url:'charge',name:'充值记录'}
            ],
            isSC:true,
            
            
        }
    },
    mounted(){
        var that = this;
        if(that.$route.path == '/storeCustomer'){
            that.form.card_type = 2;
            that.isSC = false
        }
        that.getList()       
    },
    watch:{
        $route(to, from) {
            // 对路由变化作出响应...
            console.log('to',to,"from",from)
            location. reload()
            // this.$router.go(0)

        }
    },
    methods:{
        search(){
            const that = this;          
            that.getList()
        },          
        changePage(val){
            var that = this;
            console.log(that.form)
            that.pageNum = val;
            that.form.page = val;
            that.getList()
        },
        theClick(url,a){
            let that = this;
            let obj = {};
            obj.title = a.nickname;
            obj.card_id = a.card_id;
            if(that.$route.path == '/storeCustomer'){
                obj.card_type = 2
            }
            if(url == "consume"){
                //消费记录
                that.$router.push({
                    name:'/consumption',
                    params:obj,
                    path:'/consumption'
                })
            }else{
                that.$router.push({
                    name:'/recharge',
                    params:obj,
                    path:'/recharge'
                })
            }
        },
        getList(){
            let that = this;
            console.log(that.$route)
            
            abc.get(that,potUrl.vipcardlist,that.form,(res)=>{
                that.tableData = res.data.list;
                that.total = res.data.total;
            })
        },
    }
}

</script>